<template>
  <div class="setting">
    <form class="login-form">
      <div class="form-item">
        <span>手机号:</span>
        <input type="text" class="txt" v-model="phone">
      </div>

      <div class="form-item">
        <button @click.prevent="handleChange" class="btn">修改</button>
      </div>
    </form>
  </div>
</template>

<script setup>
import {useStore} from "vuex";
import {nextTick, ref} from "vue";
import {useRouter} from "vue-router";

defineOptions({name: 'setting'})

const store = useStore();
const $route = useRouter();

const phone = ref(store.state.user.userInfo.tel);

const handleChange = async () => {
  await store.dispatch("user/changePhone", phone.value)
  window.alert("修改成功")
  await $route.replace('/info')
}
</script>

<style scoped>
.setting {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn {
  margin-left: 68px;
}
</style>